<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-02-02 21:38:44
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-05 17:08:24
-->
<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-02-02 20:12:37
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-04 20:00:17
-->
<template>
    <Loading v-if="isLoading" :progress="progress"></Loading>
    <div class="product" v-show="!isLoading" id="product">
        <div v-if="products[descIndex]">
            <div
                class="desc"
                :class="{ active: descIndex == i }"
                v-for="(desc, i) in products[productIndex].desc"
                :key="i"
            >
                <h1 class="title">{{ desc.title }}</h1>
                <p class="content">{{ desc.content }}</p>
            </div>
        </div>
        <div
            class="prod-list"
            @mouseleave="mouseWheel = true"
            @mouseover="mouseWheel = false"
            :class="{ hidden: isFullScreen }"
        >
            <h1>
                <SketchOutlined />产品推荐
            </h1>
            <div class="products">
                <div
                    class="item"
                    :class="{ active: i === productIndex }"
                    @click="changeModel(i)"
                    v-for="prod, i in products"
                    :key="i"
                >
                    <div class="title">{{ prod.title }}</div>
                    <img :src="prod.imgsrc" />
                    <a-button type="primary" block @click.stop="addBuyCart(prod)">
                        <template #icon>
                            <ShoppingCartOutlined />加入购物车
                        </template>
                    </a-button>
                </div>
            </div>
        </div>
        <div
            class="scene-list"
            @mouseleave="mouseWheel = true"
            @mouseover="mouseWheel = false"
            :class="{ hidden: isFullScreen }"
        >
            <h3>
                <RadarChartOutlined />使用场景切换
            </h3>
            <div class="scenes">
                <div
                    class="item"
                    :class="{ active: i === sceneIndex }"
                    @click="changeSecne(i)"
                    v-for="scene, i in scenes"
                    :key="i"
                >
                    <img :src="`./files/hdr/${scene}.jpg`" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useStore } from '@s/index'
import { storeToRefs } from 'pinia'
import { useMouseWheel } from '@u/wheel';
import { ref, onMounted } from "vue"
import * as api from '@ap'
import Base3d from '@ut/Base3d.js';
import {
    SketchOutlined,
    RadarChartOutlined,
    ShoppingCartOutlined
} from '@ant-design/icons-vue';
import Loading from '@c/Loading.vue'
const store = useStore()
const { isFullScreen } = storeToRefs(store)

const isLoading = ref(true)
const mouseWheel = ref(true)
const products = ref([])
const productIndex = ref(0)
const scenes = ref([])
const sceneIndex = ref(0)
const base3d = ref(null)
const descIndex = ref(0)
const progress = ref(0)

function LoadingFinish() {
    console.log('加载完成')
    isLoading.value = false;
}
const getProducts = async () => {
    isLoading.value = true
    const data = await api.getProducts()
    products.value = data.list
    scenes.value = data.hdr
}
onMounted(async () => {
    await getProducts()
    base3d.value = new Base3d("#product", LoadingFinish)
    base3d.value.onProgress((e) => {
        let progressNum = e.loaded / e.total;
        progressNum = progressNum.toFixed(2) * 100;
        progress.value = progressNum;
    });
})
/**
* 监听鼠标滚轮事件
*/
useMouseWheel((deltaY) => {
    // let duration = base3d.value.animateAction._clip.duration;
    // let time = base3d.value.animateAction.time;
    // let index = Math.floor((time / duration) * 4);
    // descIndex.value = index;
    if (mouseWheel.value) {
        deltaY > 0 ? store.setFullScreen(true) : store.setFullScreen(false)
    }
})

/**
 * 切换模型
 */
const changeModel = (index) => {
    productIndex.value = index
    base3d.value.setModel(products.value[index].modelName)
}
/**
 * 切换场景
 */
const changeSecne = (index) => {
    sceneIndex.value = index
    base3d.value.setEnvMap(scenes.value[index])
}

const addBuyCart = (prod) => {
    const product = { ...prod, num: 1 }
    store.addBuycart(product)
}




</script>
<style lang="less" scoped>
.desc {
    position: fixed;
    z-index: 100000;
    background-color: rgba(255, 255, 255, 0.5);
    width: 600px;
    top: 100px;
    left: 50%;
    margin-left: -300px;
    transition: all 0.5s;
    transform: translate(-100vw, 0);
    padding: 15px;
}
.desc.active {
    transform: translate(0, 0);
}

.prod-list {
    width: 300px;
    height: 100vh;
    padding: 60px 0 0;
    position: fixed;
    z-index: 1000000;
    transition: all 0.5s;
    background-color: rgba(255, 255, 255, 0.8);
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    h1 {
        font-size: 20px;
        font-weight: 900;
        padding: 10px 25px 0;
    }
    .products {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .item {
            width: 250px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            align-items: center;
            background-color: white;
            margin: 10px 0;
            transition: all 0.3s;
            &:hover {
                transform: translate(0px, -5px);
                box-shadow: 5px 5px 10px #666;
            }
            img {
                width: 190px;
                height: 190px;
            }
            .title {
                font-size: 14px;
                color: #ccc;
                margin-bottom: 10px;
            }
            a-button {
                margin-top: 10px;
            }
        }
        .item.active {
            box-shadow: 0 0 10px red;
        }
    }
}

.prod-list.hidden {
    transform: translate(-100%, 0);
}
.scene-list {
    width: 300px;
    height: 100vh;
    overflow: auto;
    padding: 60px 0 0;
    position: fixed;
    z-index: 100000;
    transition: all 0.5s;
    background-color: rgba(255, 255, 255, 0.8);
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    h3 {
        font-size: 20px;
        font-weight: 900;
        padding: 10px 25px 0;
    }
    .scenes {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .item {
            width: 250px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            align-items: center;
            background-color: white;
            margin: 10px 0;
            transition: all 0.3s;
            &:hover {
                transform: translate(0px, -5px);
                box-shadow: 5px 5px 10px #666;
            }
            img {
                transition: all 0.3s;
                width: 100%;
                height: 100px;
                border-radius: 10px;
            }
        }
        .item.active {
            box-shadow: 0 0 10px red;
        }
    }
}

.scene-list.hidden {
    transform: translate(100%, 0);
}
</style>